<template>
  <div>
    <el-tabs  @tab-click="labelClick" tab-position="right" v-model="activeTab" >
      <el-tab-pane v-for="item in my_tab_pane" :key="item.id" :label="item.name" :name="item.id"/>
    </el-tabs>
  </div>
</template>
<script setup >
import {onMounted, onUnmounted, ref} from "vue";
import {selectNavi} from "@/api/article"
const pros = defineProps(['sendLabelId'])
import emitter from "@/utils/emitter.js";
const my_tab_pane = ref([])
const activeTab = ref(null)
async function getNavi(){
  const { data: { data } } = await selectNavi()
  my_tab_pane.value = data
  //将标签id传递给 父组件
  pros.sendLabelId(my_tab_pane.value[0].id)
}
onMounted(()=>{
  getNavi()
})

function labelClick(pane){
  pros.sendLabelId(pane.props.name)

}

//绑定事件 类似于事件监听
emitter.on('send-articleList',()=>{
  activeTab.value = null;
})
onUnmounted(()=>{
  emitter.off('send-articleList')
})
</script>
<style scoped>

</style>